@charset 'UTF-8';
@import '../../config/scss/function.scss', '../../config/scss/config.scss';

.reviewDetail {
  .button_sty{
      padding: 7px 10px !important;
      margin-right: 2%;
      width:80px !important;
  }
  // 面包屑的样式
  .breadcrumb-row {
      margin-top: 10px;

      .breadcrumb {
          background-color: $mt_c_default;

          li {
              a {
                  color: $mt_c_main;
              }

              &:first-child {
                  a {
                      color: $mt_c_third;
                  }
              }
          }

          .li-1::before {
              content: '>' !important;
          }

          .li-2::before {
              content: '|' !important;
          }
      }
  }
  // 内容板块的样式
  .content-row {
      .state-list-group {
          // 竖排状态栏的样式
          .list-group-item {
              text-align: center;
              padding: 0;
              border-radius: 0;
              border: 0;
              padding-bottom: 35px;

              &:last-child {
                  padding-bottom: 10px;

                  &::after {
                      content: '';
                  }
              }
              // 伪标签的样式
              &::after {
                  content: '......';
                  position: absolute;
                  transform: rotate(90deg);
                  top: 40px;
                  left: 43%;
              }
              // 圆圈的样式
              .cricle {
                  margin: 0 auto 5px;
                  width: 10px;
                  height: 10px;
                  border-radius: 50%;
                  background-color: $mt_c_default;
                  border: 2px solid $mt_c_fourth;
                  overflow: hidden;
              }
              // 标签的样式
              &.disabled {
                  background-color: $mt_c_main;
                  color: $mt_c_default;
                  padding: 15px 0;
                  margin-bottom: 10px;

                  &::after {
                      content: '';
                  }
              }
          }

          .active.list-group-item {
              background-color: $mt_c_default;
              color: #333;
              border: 0;

              .cricle {
                  border-color: $mt_c_main;
              }

              span {
                  color: $mt_c_main;
              }

              &::after {
                  color: $mt_c_main;
              }
          }
      }
      // 面板的通用样式
      .panel {
          border: 1px solid $mt_c_border;
          border-radius: 0;

          .panel-heading {
              h4 {
                  color: $mt_c_second;
                  border-left: 3px solid $mt_c_main;
                  padding-left: 10px;
              }
          }

          .panel-body {}
      }
      // 最新进展的样式
      .new-step-row {
          // 取消按钮样式
          .cancel-block {
              color: $mt_c_fourth;
              bottom: 0;

              .cancel-btn {
                  padding-left: 5px;
                  color: $mt_c_second;
              }
          }
          // 圆形头像
          .img-circle {
              width: 55px;
              height: 55px;
              
          }
          // 绿色的名字
          .name {
              color: $mt_c_main;
          }
          // 提醒文字
          .tip-info {
              color: $mt_c_fourth;
          }
          #previewul, .previewpicturelist, #previewul1 {
            margin: 0;
            padding: 0;
            list-style-type: none;
            li {
              float: left;
              margin: 10px 0;
              margin-right: 5px;
              img[id^=previewid], img {
                width: 50px;
                height: 50px;
              }
            }
          }

          .img-fang {
            width: 100%;
          }

          .icon-xing {
            color: $mt_c_fourth;
            &.active {
              color: $mt_c_main;
            }
          }
      }
      // 订单详细的样式
      .order-detail-row {
          p {
              color: $mt_c_second;
          }
          // 编辑按钮的样式
          .edit-block {
              color: $mt_c_fourth;

              .edit-btn {
                  padding-left: 5px;
                  color: $mt_c_second;
              }
          }
      }
      // 留言板样式
      .comment-row {
          .comment-input {
              border-color: $mt_c_border !important;
          }

          .comment-list {
              color: $mt_c_third;
              border-bottom: 1px solid $mt_c_border;

              &:last-child {
                  border-bottom: 0;
              }
          }
      }
      // 订单日志的样式
      .record-row {
          .list-group-item {
              border-radius: 0 !important;
              border-left: 0;
              border-right: 0;
              padding-left: 0;

              &:last-child {
                  border-bottom: 0;
              }
          }

          ol {
              list-style-type: none;
              margin: 0;
              padding: 0;
          }

          .previewhostroy {
              list-style-type: none;
              margin: 0;
              padding: 0;
              display: flex;
              flex-flow: row nowrap;
              
              li {
                  margin-left: 5px;
                  img {
                      width: 50px;
                  }

                  &:first-child {
                    margin-left: 0;
                  }
              }
          }
      }
  }

  #payModal {
      .form-group-line {
          padding-bottom: 17px;
          border: 0;
          border-bottom: 1px solid $mt_c_border;

          div {
              color: $mt_c_second;
              margin-top: 10px;
          }

          div.state {
              color: $mt_c_fourth;
          }

          div {
              .money1 {
                  color: $mt_c_warning;
              }

              .money2 {
                  color: $mt_c_second;
              }
          }
      }
  }
}
